<template>
  <div class="home-warp">
    <home-header></home-header>
    <home-swiper :swiper-list="swiperList"></home-swiper>
    <home-icons :icons-list="iconsList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-week :weekend-list="weekendList"></home-week>
  </div>
</template>
<script>
  import axios from 'axios';

  import HomeHeader from './components/Header.vue';
  import HomeSwiper from './components/HomeSwiper.vue';
  import HomeIcons from './components/Icons.vue';
  import Recommend from './components/Recommand.vue'
  import Week from './components/Week.vue'

  export default {
    name: "Home",
    components: {
      'home-header': HomeHeader,
      'home-swiper': HomeSwiper,
      'home-icons': HomeIcons,
      'home-recommend': Recommend,
      'home-week': Week
    },
    data: function() {
      return {
        iconsList: [],
        recommendList: [],
        swiperList: [],
        weekendList: []
      }
    },
    mounted: function() {
      this.getDatas();
    },
    methods: {
      getDatas: function() {
        var _this = this;
        axios.get('http://192.168.0.101:8080/static/index.json')
          .then(function(res) {
            var data1 = res.data.data;
            _this.iconsList = data1.iconsList;
            _this.recommendList = data1.recommendList;
            _this.swiperList = data1.swiperList;
            _this.weekendList = data1.weekendList;
          })
          .catch(function(res) {
            console.log(res)
          });
      }
    }
  }
</script>

<style scoped="scoped">
  .home-warp {
    width: 100%;
    height: 100%;
  }
</style>
